<template>
    <div>
        <el-table :data="page.records" @selection-change="handleSelectionChange" style="width: 1450px">
            <el-table-column type="selection" width="50" />
            <el-table-column prop="barCode" label="条码" width="80" />
            <el-table-column prop="materialName" label="名称" width="250" />
            <el-table-column prop="categoryName" label="类别" />
            <el-table-column prop="standard" label="规格" />
            <el-table-column prop="model" label="型号" />
            <el-table-column prop="color" label="颜色" />
            <el-table-column prop="commodityUnit" label="单位" />
            <el-table-column prop="sku" label="多属性" />
            <el-table-column prop="totalOperNumber" label="库存" />
            <el-table-column prop="mfrs" label="扩展信息" />
        </el-table>
        <!-- 分页组件 -->
        <el-pagination v-model:page-size="page.size" v-model:current-page="page.current" @current-change="loadMenus"
            @size-change="loadMenus" :page-sizes="[2, 4, 8, 10]" layout="total, sizes, prev, pager, next, jumper"
            :total="page.total" background style="float: right;margin-top: 10px;">
        </el-pagination>
        <!-- 按钮 -->
        <form>
            <div style="position: absolute; bottom: 20px; right: 20px;"> <!-- 使用绝对定位 -->
            <el-row :gutter="20" style="height: 30px">
                <el-col >
                    <el-form-item >
                        <el-button @click="close">关闭</el-button>
                        <el-button type="primary" @click="saveSelectedItems">保存</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        </form>
    </div>
</template>

<script setup>
import { ref, defineEmits,onMounted,defineProps,watch } from 'vue';
import request from '@/api/request';
import { ElMessage } from 'element-plus';
let props = defineProps(["data"]);
let linkText = ref('展开')
let isDivVisible = ref(false)
let purchase = ref({})
let emits = defineEmits(['saveSaleinorder', 'close']);
const page = ref({
    current: 1,
    size: 10,
    total: 0,
    records: []
});

// 监视 data 的变化
// watch(() => props.data, (newValue) => {
//     console.log('data变化为:', newValue);
//     purchase.value.depId = newValue;
//     console.log('purchase.depId:', purchase.value.depId); // 输出确认
// });

// 仓库查询
const depots = ref([]);
const loadDepot = () => {
    request({
        url: '/depot/list',
        method: 'get'
    }).then(res => {
        depots.value = res.data; // 更新仓库数据
    }).catch(err => {
        console.error(err);
    });
};
loadDepot();

//初始化
const loadMenus = () => {
    request({
        url: '/commodity/material/list',
        method: "get",
        params: {
            current: page.value.current,
            size: page.value.size,
            depId: purchase.value.depId // 仓库 ID
        }
    }).then(res => {
        console.log('res', res);
        page.value.records = res.data.records;
        page.value.total = res.data.total;
    }).catch(err => {
        ElMessage.error('加载数据失败');
    });
};
let cz = () => {
    purchase.value = {}; // 重置查询条件
    loadMenus(); // 重新加载数据
};
//关闭弹框
let close = () => {
    emits('close')
}

//展开/收起
let ss = () => {
    isDivVisible.value = !isDivVisible.value;
    linkText.value = isDivVisible.value ? '收起' : '展开'
}

const selectedItems = ref([]);
const saveSelectedItems = () => {
    if (selectedItems.value.length === 0) {
        ElMessage.warning('请至少选择一个商品');
        return;
    }
    emits('saveSaleinorder', selectedItems.value);
    close();
    console.log('selectedItems', selectedItems.value);
};
const handleSelectionChange = (val) => {
  
    selectedItems.value = val;
};




// 组件加载时初始查询
onMounted(() => {
    purchase.value.depId = props.data.depId; // 初始化时设置仓库ID
    loadDepot(); // 加载仓库数据
    loadMenus(); // 加载菜单数据
});

</script>

<style scoped>
a:hover {
    color: #40a9ff;
}

a {
    color: #1890ff;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color .3s;
    -webkit-text-decoration-skip: objects;
}

.anticon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.anticon svg {
    display: inline-block;
}
</style>